<template>
  <div class="box">
    <div class="left">
      <h4>计费管理 / 缴费类性管理</h4>
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        style="margin-top: 20px"
      >
        <el-form-item>
          <el-input
            v-model="formInline.paymoney"
            placeholder="项目价格"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.paystatus" placeholder="通知状态">
            <el-option label="已通知" :value="1"></el-option>
            <el-option label="未通知" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div>
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
          node-key="id"
          :default-expanded-keys="[7, 8, 9, 11]"
        ></el-tree>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <h1>{{ title }}</h1>
        <div>
          <el-button type="primary" icon="el-icon-search" @click="search"
            >查询</el-button
          >
          <el-button type="success" icon="el-icon-plus" @click="add"
            >新增</el-button
          >
          <el-button type="primary" icon="el-icon-refresh" @click="refresh"
            >刷新</el-button
          >
          <el-button type="primary" icon="el-icon-upload2" @click="derive"
            >导出</el-button
          >
        </div>
      </div>
      <template>
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          stripe
          v-loading="loading"
        >
          <el-table-column
            prop="payname"
            label="缴费项目名称"
            align="center"
            fit
          >
          </el-table-column>
          <el-table-column
            prop="paylevel"
            label="缴费项目优先级"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="paynum"
            label="项目用量/时常"
            align="center"
            fit
          >
          </el-table-column>
          <el-table-column
            prop="paymoney"
            label="项目价格"
            sortable
            align="center"
            fit
          >
          </el-table-column>
          <el-table-column
            prop="paytime"
            label="创建时间"
            sortable
            align="center"
            :formatter="datatime"
            fit
          >
          </el-table-column>
          <el-table-column
            prop="username"
            label="通知人"
            align="center"
            :formatter="people"
            fit
          >
          </el-table-column>
          <el-table-column
            prop="paystatus"
            label="状态"
            align="center"
            :formatter="state"
            fit
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            align="center"
            fit
            min-width="210"
          >
            <template slot-scope="scope">
              <el-button plain @click="open(scope.row)">通知</el-button>
              <el-button type="primary" plain @click="look(scope.row)"
                >查看</el-button
              >
              <el-button type="danger" plain @click="del(scope.row)"
                >作废</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[9, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- ============================ -->
    <el-dialog title="计费通知" :visible.sync="dialogFormVisible">
      <div class="textTop">
        <el-input
          v-model="user"
          placeholder="请输入用户账户"
          style="width: 430px"
        ></el-input>
        <el-button
          type="primary"
          style="margin-left: 20px"
          icon="el-icon-search"
          @click="getuser"
        ></el-button>
        <el-button type="warning" icon="el-icon-refresh" @click="funcz">重置</el-button>
      </div>
      <div class="textcontent">
        <el-table
          :data="tableData2"
          v-loading="loading2"
          border
          style="width: 100%"
          highlight-current-row
          @current-change="adds"
        >
          <el-table-column type="index" width="65" label="序号" align="center">
          </el-table-column>
          <el-table-column
            prop="username"
            label="用户账号"
            width="205"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="homeaddress"
            label="家庭住址"
            width="253"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="type" label="类型" width="168" align="center">
          </el-table-column>
          <el-table-column
            prop="coststatus"
            label="缴费状态"
            width="168"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="currentPage2"
          :page-sizes="[5, 7, 20, 50]"
          :page-size="pagesize2"
          layout="total, sizes, prev, pager, next,jumper"
          :total="total2"
        >
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="tzList">通 知</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import * as XLSX from "xlsx";
export default {
  data() {
    return {
      dialogFormVisible: false,
      formInline: {},
      ruleForm: {},
      total2: 0,
      add1: [],
      cid: null,
      uid: null,
      currentPage2: 1, //第一个的变量当前页

      pagesize2: 7,

      formInline2: {},
      tableData2: [],
      input: "",
      dialogVisible: true,
      data: [
        {
          label: "缴费项目",
          children: [
            {
              label: "电费项目",
              children: [
                {
                  label: "电费目录表",
                  id: 7,
                },
              ],
            },
            {
              label: "水费项目",
              children: [
                {
                  label: "水费固定月目录表",
                  id: 8,
                },
                {
                  label: "水费按量计价目录表",
                  id: 9,
                },
              ],
            },
            {
              label: "天然气项目",
              children: [
                {
                  label: "天然气目录表",
                  id: 10,
                },
              ],
            },
            {
              label: "物业费项目",
              children: [
                {
                  label: "物业费目录表",
                  id: 11,
                },
              ],
            },
            {
              label: "宽带费项目",
              children: [
                {
                  label: "宽带费目录表",
                  id: 12,
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      user: "",
      user2: "",
      tile: " ",
      tableData: [],
      total: 0,
      pageSize: 9,
      currentPage: 1,

      loading: false,
      loading2: false,
      cid: 7,
      nowid: 7,
    };
  },
  created() {
    this.getList(7);
    this.getList2();
    this.title = "电费目录";
  },
  methods: {
    // 通知
    open(e) {
      this.dialogFormVisible = true;
      this.cid = e.id;
      console.log(this.cid);
    },
    async tzList() {
      this.loading2=true;
      await this.$axios
        .post("/cost/updateCostData", {
          u_id: this.uid,
          c_id: this.cid,
          coststatus: this.currentRow.coststatus,
          paystatus: 1,
          username: this.currentRow.username,
        })
        .then((res) => {
          this.loading2=false;
          console.log(res);
          this.dialogFormVisible = false;
          this.getList(this.nowid);
        });
    },
    // 页码
    handleSizeChange1(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize2 = val;
      if (this.user2) {
        this.getusers();
      } else {
        this.getList2();
      }
    },
    handleCurrentChange1(val) {
      console.log(`第 ${val} 页`);
      this.currentPage2 = val;
      if (this.user2) {
        this.getusers();
      } else {
        this.getList2();
      }
    },
    // 重置
    funcz(){
      this.user2 = "";
      this.user = "";
      this.getList2();
    },
    // 树形控件
    handleNodeClick(data) {
      this.currentPage = 1;
      // console.log(data);
      this.nowid = data.id;
      
      if (data.id) {
        this.getList(data.id);
        this.title = data.label.split('表')[0];
      }
    },
    // 电费接口
    async getList(a) {
      this.loading = true;
      this.cid = a;
      await this.$axios
        .get("/cost/getCostData", {
          params: {
            c_id: a,
            paymoney: "",
            paystatus: "",
            currPage: this.currentPage - 1,
            pageNum: this.pageSize,
          },
        })
        .then((res) => {
          //   console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        });
    },
    //弹框接口
    async getList2() {
      await this.$axios
        .get("/users/getUserList", {
          params: {
            username: "",
            currPage: this.currentPage2 - 1,
            pageNum: this.pagesize2,
          },
        })
        .then((res) => {
          console.log(res);
          this.tableData2 = res.data.data;
          this.total2 = res.data.total;
        });
    },
    //搜索
    getuser() {
      this.user2 = this.user;
      this.getusers();
    },
    // 搜索接口
    async getusers() {
      this.loading2=true;
      await this.$axios
        .get("/users/getUserList", {
          params: {
            username: this.user2,
            currPage: this.currentPage2 - 1,
            pageNum: this.pagesize2,
          },
        })
        .then((res) => {
          this.loading2=false;
          console.log(res);
          this.tableData2 = res.data.data;
          this.total2 = res.data.total;
        });
    },

    // 状态格式化
    state(e) {
      //   console.log(e);
      if (e.paystatus == 1) {
        return "已通知";
      } else {
        return "未通知";
      }
    },
    // 时间格式化
    datatime(row, column, cellValue) {
      if (cellValue) {
        return moment(cellValue).utc().format("YYYY-MM-DD");
      } else {
        return "暂无";
      }
    },
    // 通知人格式化
    people(row, column, cellValue) {
      if (cellValue) {
        return cellValue;
      } else {
        return "暂无";
      }
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      if (this.formInline2) {
        this.searchs();
      } else {
        this.getList(this.cid);
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      if (this.formInline2) {
        this.searchs();
      } else {
        this.getList(this.cid);
      }
    },
    // 搜索
    search() {
      this.formInline2 = JSON.parse(JSON.stringify(this.formInline));
      this.currentPage = 1;
      this.searchs();
    },
    // 搜索接口
    async searchs() {
      this.loading = true;
      await this.$axios
        .get("/cost/getCostData", {
          params: {
            c_id: this.cid,
            paymoney: this.formInline2.paymoney,
            paystatus: this.formInline2.paystatus,
            currPage: this.currentPage - 1,
            pageNum: this.pageSize,
          },
        })
        .then((res) => {
          //   console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        });
    },
    // 刷新按钮
    refresh() {
      if (this.formInline2) {
        this.searchs();
      } else {
        this.getList(this.cid);
      }
    },
    // 导出excel
    derive() {
      const tableData = this.tableData; // 如果表格数据为空，提示用户

      if (tableData.length === 0) {
        this.$message({
          type: "warning",
          message: "没有数据可以导出！",
        });
        return;
      } // 定义表头

      const headers = [
        "缴费项目名称",
        "缴费项目优先级",
        "项目用量",
        "项目价格",
        "创建时间",
        "通知状态",
      ]; // 将表格数据转换为工作表数据

      const worksheetData = [
        headers, // 第一行为表头
        ...tableData.map((item) => [
          item.payname || "暂无", // 如果为空，填充为“暂无”
          item.paylevel || "暂无",
          item.paynum || "暂无",
          item.paymoney || "暂无",
          item.paytime || "暂无",
          item.paystatus === 1
            ? "已通知"
            : item.homestatus === 2
            ? "未通知"
            : "未通知", // 转换状
        ]),
      ]; // 创建工作表

      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData); // 创建工作簿

      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); // 导出 Excel 文件

      XLSX.writeFile(workbook, "数据列表.xlsx"); // 提示导出成功

      this.$message({
        type: "success",
        message: "导出成功！",
      });
    },
    // 删除作废
    del(row) {
      console.log(row);
      this.$confirm("确定永久作废这条计费项目?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.$axios
            .get("/cost/delCostData", {
              params: {
                id: row.id,
                token: sessionStorage.getItem("token"),
              },
            })
            .then((res) => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList(this.cid);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 查看按钮
    look(row) {
      this.$router.push({
        path: "/pay/paylook",
        query: {
          flag: 2,
          id: row.id,
        },
      });
    },
    // 新增
    add() {
      this.$router.push({
        path: "/pay/paylook",
        query: {
          flag: 1,
        },
      });
    },
    adds(val) {
      this.uid = val.c_id;
      this.currentRow = val;
      console.log(this.uid);
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  display: flex;
  justify-content: space-between;
}
.box > .right {
  padding-top: 40px;
  width: 70%;
  .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
}

::v-deep .el-table .has-gutter tr th {
  background: rgb(238, 241, 246);
  color: rgb(31, 45, 61);
  border-color: rgb(223, 230, 236);
  font-size: 14px;
  text-align: center;
}
.custom-table ::v-deep .el-table .has-gutter tr th {
  background: rgb(84, 4, 4);
  color: rgb(0, 56, 120);
  border-color: rgb(223, 230, 236);
  font-size: 14px;
  text-align: center;
}
.page {
  display: flex;
  justify-content: right;
}
::v-deep .el-dialog {
  width: 900px;
}
::v-deep .el-dialog__title {
  font-size: 20px;
  color: #303133;
  font-weight: bolder;
}
.textcontent {
  margin-top: 10px;
}
.block {
  display: flex;
  flex-direction: row-reverse;
  margin-top: 20px;
}
.el-button--primary.is-plain,
.el-button--primary.is-plain {
  background-color: #ffffff00;
}
.el-button--primary.is-plain:focus,
.el-button--primary.is-plain:hover {
  color: #409eff;
}
.el-button--danger.is-plain,
.el-button--danger {
  background-color: #ffffff00;
}
.el-button--danger.is-plain:focus,
.el-button--danger.is-plain:hover {
  color: #f56c6c;
}
</style>